<!--
    @author Yancy Zhang
    @date 2022/4/5
    @description 博客主页
-->
<template>
  <div class="home-page">
    <div>
      <Header></Header>
    </div>
    <div class="main">
      <div class="author-info">
        <div class="avtar">
          <img src="../../../public/image/yancy.png" alt="">
        </div>
        <div class="title">
          <h1>Yancy's Blog!</h1>
        </div>
      </div>
      <div class="home-content auto-play">
        <el-skeleton style="width: 100%;background-color: white" animated :loading="loading">
          <template slot="template">
            <div style="display: flex; padding: 10px">
              <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
              <el-skeleton style="flex:1;padding: 10px"/>
            </div>
          </template>
          <template slot="template">
            <div style="display: flex; padding: 10px">
              <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
              <el-skeleton style="flex:1;padding: 10px"/>
            </div>
          </template>
          <template>
            <div class="left-content">
              <h2 class="title">New Artilces</h2>
              <router-link :to='"/article-dtail/"+newBlog._id'>
                <div class="main-article article">
            <span class="article-img-wrap">
              <img v-lazy="newBlog.blog_cover_img"
                   alt="" class="article-img">
              <i></i>
            </span>
                  <div class="article-content">
                    <div>
                      <span class="article-title">{{ newBlog.blog_title }}</span>
                    </div>
                    <div class="article-desc">
                      <p class="mian-content-inner">
                        {{ newBlog.blog_desc }}
                      </p>
                    </div>
                    <div class="article-bottom">
                      发布于 {{ newBlog.blog_post_time | formatTime }}
                    </div>
                  </div>
                </div>
              </router-link>
              <div class="second-main-articles">
                <router-link :to='"/article-dtail/"+item._id' v-for="item in blogList" :key="item._id">
                  <div class="second-article article">
            <span class="article-img-wrap">
              <img v-lazy="item.blog_cover_img"
                   alt="" class="article-img">
              <i></i>
            </span>
                    <div class="article-content">
                      <div>
                        <span class="article-title">{{ item.blog_title }}</span>
                      </div>
                      <p class="article-desc">
                        {{ item.blog_desc }}
                      </p>
                      <div class="article-bottom">
                        发布于 {{ item.blog_post_time | formatTime }}
                      </div>
                    </div>
                  </div>
                </router-link>
              </div>
              <div class="more-tip">
                <router-link to="article-list">查看更多</router-link>
              </div>
            </div>
          </template>
        </el-skeleton>
        <h2 class="title">My Projects</h2>
        <div class="my-project-list">
          <a href="http://m.nefuswzl.top">
            <div class="item">
              <div class="pro-img">
                <img src="http://m.nefuswzl.top/东林二手街.jpg" alt="">
              </div>
              <div class="pro-name">
                东林二手街
              </div>
            </div>
          </a>
          <a href="http://nefuswzl.top/hlqk">
            <div class="item">
              <div class="pro-img">
                <img src="http://nefuswzl.top/hlqk/logo3.png" alt="">
              </div>
              <div class="pro-name">
                壶里乾坤
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import {getBlogList} from "../../http/api";

export default {
  name: "HomePage",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      newBlog: {},
      blogList: [],
      loading: true
    }
  },
  created() {
    getBlogList(4, 1).then((res) => {
      this.blogList = res.data.blogList;
      this.newBlog = this.blogList.shift();
      this.loading = false;
    })
  }
}
</script>

<style scoped>
.author-info {
  text-align: center;
  padding: 10px 0;
  background: url("../../../public/image/bg.jpg");
}

.main .avtar img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: all 0.6s;
  animation: rotate 1s linear;
}

.main .avtar img:hover{
  cursor: url(""), pointer;
  transform: rotate(-360deg);
}

.main .title {
  color: black;
  font-family: 'Press Start 2P';
}

/*内容展示*/
.left-content {
  flex: 1;
}

.left-content .title {
  text-align: left;
  font-family: 'Press Start 2P';
}

.main-article {
  display: flex;
  flex-direction: row;
  background-color: white;
  margin-bottom: 20px;
}

.main-article .article-img {
  height: 230px;
  width: 460px;
}
.main-article .article-desc .mian-content-inner{
  max-width: 500px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
}
  /*文字部分*/
.main-article .article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  max-width: 500px;
}


.article-title {
  font-size: 1.5rem;
  color: #42b983;
}

.article-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.article-desc {
  color: #555;
  flex: 1;
}

.article-bottom {
  color: #8d91a5;
}

/*下部的三个最新博客*/
.second-main-articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.second-main-articles a {
  width: 32.7%;
}

.second-main-articles:after{
  content: "";
  width: 32.7%;
}

.second-article {
  display: flex;
  flex-direction: column;
  background-color: white;
}

.second-article .article-img {
  height: 170px;
  width: 100%;
}

.second-article .article-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.second-article .article-desc{
  min-height: 36.8px;
}
/*更多*/
.more-tip {
  padding: 10px 0;
  text-align: center;
  color: #42b983;
}
/*个人作品*/
.my-project-list{
  display: flex;
  flex-wrap: wrap;
}
.my-project-list a{
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  width: 33.33%;
}
.item{
  background-color: white;
}
.item img{
  width: 100%;
  height: auto;
}
.item .pro-name{
  color: #666;
  text-align: center;
  font-weight: 700;
  padding: 10px 0;
}
/*移动端适配*/
@media screen and (max-width: 1000px) {
  .main-article {
    flex-direction: column;
  }

  .main-article .article-img {
    height: 230px;
    width: 100%;
  }

  .second-main-articles {
    flex-direction: column;
  }

  .second-main-articles a {
    width: 100%;
    margin-bottom: 20px;
  }

  .second-main-articles .article-img {
    height: 230px;
  }
}
</style>
